<template>
  <div class="order">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-navbar">
          <block v-for="(item, index) in tabs" :key="item.status">
            <div :class="{'weui-bar__item_on':activeIndex === index}" class="weui-navbar__item" @click="tabClick(index)">
              <div class="weui-navbar__title" :class="{'active':activeIndex === index}">
              <div :class="['icon', item.icons]"></div>{{item.name}}</div>
            </div>
          </block>
          <div class="weui-navbar__slider" :class="navbarSliderClass"></div>
        </div>
        <div class="weui-tab__panel">
          <block v-for="(val, i) in tabs" :key="val.status">
            <div v-if="activeIndex === i" class="weui-tab__content">
              <div v-if="orderData.length > 0">
                <div v-for="(item, index) in orderData" :key="item.id" class="card card-shadow">
                  <Order :order="item" @refresh="refreshOrderList" />
                </div>
              </div>
              <div v-else class="empty text-center">
                <div class="icon icon-empty"></div>
                <p>暂无数据</p>
              </div>
            </div>
          </block>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Order from '@/components/Order'
import getOrderList from '@/interface/order/getOrderList'

export default {
  components: { Order },
  data () {
    // orderStatus: 0 => 待支付, 1 => 进行中 2 => 已取消 3 => 待评价 4 => 已完成
    return {
      tabs: [
        {name: '待支付', icons: 'icon-order-money', status: 0},
        {name: '进行中', icons: 'icon-order-time', status: 1},
        {name: '已完成', icons: 'icon-order-money', status: 4},
        {name: '待评价', icons: 'icon-order-flower', status: 3}
      ],
      activeIndex: 0,
      orderData: []
    }
  },
  computed: {
    navbarSliderClass () {
      return `weui-navbar__slider_${this.activeIndex}`
    }
  },
  methods: {
    tabClick (index) {
      this.activeIndex = index
      this.getOrderList()
    },
    getOrderList () {
      const orderStatus = this.tabs[this.activeIndex].status
      getOrderList({orderStatus}).then(list => {
        this.orderData = list
      })
    },
    refreshOrderList () {
      this.getOrderList()
    }
  },
  onShow(){
    if(this.checkLogin()){
      this.getOrderList()
    }
  },
  onLoad(query){
    this.activeIndex = Number(query.orderStatus) || 0;
  },
  onPullDownRefresh () {
    this.getOrderList()
    setTimeout(() => {
      wx.stopPullDownRefresh()
    }, 800);
  }
}
</script>

<style lang="less">
.order,
.page__bd,
page {
  min-height: 100%;
}
.weui-tab{
  padding-bottom: 60upx
}
/* #ifdef  H5 */
  .weui-tab{
    padding-bottom: 160upx
  }
/* #endif */
.empty,
page {
  background: #f9f9f9;
}
.empty {
  padding-top: 60upx;
}
.empty .icon-empty {
  margin: 0;
  width: 100upx;
  height: 100upx;
  margin-bottom: 10upx;
}
.page__bd {
  padding-bottom: 0;
}
.weui-navbar__item {
  height: 148upx;
}
.weui-navbar {
  border-bottom: 1upx solid #ddd;
  background: #fff;
}
.weui-navbar__title {
  color: #aaa;
  font-size: 30upx;
}
.weui-navbar__title .icon {
  width: 87upx;
  margin-bottom: 20upx;
  display: block;
  height: 36upx;
  margin-right: 0;
}
.active {
  color: #333;
  font-size: 30upx;
}
.weui-navbar__slider,
.weui-navbar__slider_0 {
  width: 120upx;
  left: 33upx;
  background: #fa4b70;
}
.weui-navbar__slider_0 {
  transform: translateX(0);
}
.weui-navbar__slider_1 {
  background: #fa4b70;
  width: 120upx;
  left: 33upx;
  transform: translateX(187.5upx);
}
.weui-navbar__slider_2 {
  background: #fa4b70;
  width: 120upx;
  left: 33upx;
  transform: translateX(375upx);
}
.weui-navbar__slider_3 {
  background: #fa4b70;
  width: 120upx;
  left: 33upx;
  transform: translateX(562.5upx);
}
.weui-tab__panel {
  padding-top: 144upx;
}
.weui-tab__panel .weui-tab__content {
  margin-top: 33upx;
}
.weui-tab__panel .weui-tab__content .card {
  background: #fff;
  margin-bottom: 32upx;
}


</style>